<template>
  <div style="background-color: #fff">
    <div class="container__tab">
      <div class="tab__left">
        <div class="left__item">
          <p class="abs"></p>
          <p class="word">项目</p>
          <p class="line" v-if="selected==='项目'"></p>
        </div>

        <div class="left__item">
          <p class="abs"></p>
          <p class="word">博客</p>
          <p class="line" v-if="selected==='博客'"></p>
        </div>

        <div class="left__item">
          <p class="abs"></p>
          <p class="word">问答</p>
          <p class="line" v-if="selected==='问答'"></p>
        </div>

        <div class="left__item">
          <p class="abs"></p>
          <p class="word">资讯</p>
          <p class="line" v-if="selected==='资讯'"></p>
        </div>

        <div class="left__item">
          <p class="abs"></p>
          <p class="word">动态</p>
          <p class="line" v-if="selected==='动态'"></p>
        </div>
      </div>
      <p class="tab__right">

      </p>
    </div>
    <project-card></project-card>
    <project-card></project-card>
    <project-card></project-card>
    <project-card></project-card>
    <project-card></project-card>
  </div>
</template>


<script>

  import ProjectCard from '../../../components/pc/projectCard';


  export default {
    name:'collect',
    components:{
      ProjectCard
    },
    data(){
      return{
        selected:'项目'
      }
    },
  }

</script>


<style lang="scss" scoped>

  .container__tab{
    box-sizing: border-box;
    padding:18*$length 24*$length;
    border-bottom:1px solid #EFEFEF;

    @extend %flex-row-spb;
    .tab__left{
      @extend %flex-row-spb;

      .left__item{
        position:relative;
        @extend %flex-column-spb;
        margin-right: 24*$length;

        .abs{
          position:absolute;

        }

        .word{
          @include fontStyle(14,19,500,#333,center);
          @extend %animate-transition;
          @extend %cursorPointer;
          &:hover{
            color:#00AAE6
          }
        }
        .line{
          position:absolute;
          top:32*$length;
          margin:0 auto;
          left:0;
          right:0;
          width:16*$length;
          height:4*$length;
          border-radius:2px  2px 0 0;
          background-color: #00AAE6;
        }
      }
    }
    .tab__right{
      @include fontStyle(12,16,500,#999,center);
      @extend %animate-transition;
      @extend %cursorPointer;
      &:hover{
        color:#00AAE6
      }
    }
  }


</style>
